<template>
  <div>
    <el-dialog class="upload-dialog" :visible="visible" @close="closeModel">
      <div class="upload-dialog-title" slot="title">
        <span class="title-text">上传舌诊照片</span>
        <div class="upload-instructions" @click="showInstructions">
          <i class="el-icon-question instructions-icon"></i>
          <span class="instructions-text">参考示例</span>
        </div>
      </div>
      <div class="upload-body-wrapper">
        <div class="upload-image-wrapper">
          <div class="upload-instructions-inner">
            自然光下，舌体放松，舌面平展，舌尖略向下，口张不要太用力。
          </div>

          <div class="upload-image-area-wrapper">
            <div class="image-preview" v-if="isTopUploaded">
              <div class="image-preview-mask">
                <div class="operation-container">
                  <i
                    class="el-icon-zoom-in icon zoom"
                    @click="openImagePreview(imageUrlList[0])"></i
                  ><i class="el-icon-delete icon" @click="deleteImage(0)"></i>
                </div>
              </div>
              <img class="image-preview-image" :src="imageUrlList[0]" />
            </div>
            <el-upload
              class="upload-image"
              ref="upload"
              action=""
              :show-file-list="false"
              :auto-upload="false"
              :on-change="uploadSingleImageTop">
              <div
                slot="trigger"
                :class="` ${
                  activeIndex == 1
                    ? 'image-area-activate '
                    : 'image-area-inactivate '
                }upload-image-area`">
                <img
                  class="upload-image-icon"
                  :src="activeIndex == 1 ? activeIcon : inactiveIcon" />
                <span class="upload-image-icon-text">上传舌上照片</span>
              </div>
            </el-upload>
          </div>
        </div>
        <div class="upload-image-wrapper">
          <div class="upload-instructions-inner">
            舌尖向上顶在牙齿内侧，舌下完全暴露，确保清楚的拍到舌下脉络。
          </div>

          <div class="upload-image-area-wrapper">
            <div class="image-preview" v-if="isBottomUploaded">
              <div class="image-preview-mask">
                <div class="operation-container">
                  <i
                    class="el-icon-zoom-in icon zoom"
                    @click="openImagePreview(imageUrlList[1])"></i
                  ><i class="el-icon-delete icon" @click="deleteImage(1)"></i>
                </div>
              </div>
              <img class="image-preview-image" :src="imageUrlList[1]" />
            </div>
            <el-upload
              class="upload-image"
              ref="upload"
              action=""
              :show-file-list="false"
              :auto-upload="false"
              :on-change="uploadSingleImageBottom">
              <div
                slot="trigger"
                :class="` ${
                  activeIndex == 2
                    ? 'image-area-activate '
                    : 'image-area-inactivate '
                }upload-image-area area1`"
                @click="checkCurrentStep">
                <div class="upload-image-skip">
                  <div class="skip-button">可跳过</div>
                </div>
                <div class="upload-image-icon-wrapper">
                  <img
                    class="upload-image-icon"
                    :src="activeIndex == 2 ? activeIcon : inactiveIcon" />
                  <span class="upload-image-icon-text">上传舌下照片</span>
                </div>
                <div class="upload-image-skip">
                  <div class="skip-button hide"></div>
                </div>
              </div>
            </el-upload>
          </div>
        </div>
      </div>
      <div class="upload-dialog-footer">
        <el-button @click="closeModel">取 消</el-button>
        <el-button type="primary" @click="uploadToChat">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      ref="instructions"
      :visible="showInstructionsModel"
      @close="closeInstructions">
      <div class="ins-title" slot="title">
        <i class="el-icon-arrow-left" @click="closeInstructions"></i
        ><span class="ins-title-text">参考示例</span>
      </div>
      <div class="ins-model-body">
        <div class="exp-image-wrapper">
          <div class="exp-image-wrapper-single">
            <img
              class="exp-image"
              src="http://chunfengai.top:29001/download/ex-top.png" />
            <span class="exp-image-text">舌上照片示例</span>
          </div>
          <div class="exp-image-wrapper-single">
            <img
              class="exp-image"
              src="http://chunfengai.top:29001/download/ex-bottom.png" />
            <span class="exp-image-text">舌下照片示例</span>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-image-viewer
      v-if="imagePreviewUrl"
      :url-list="[imagePreviewUrl]"
      z-index="3000"
      :on-close="closeImageViewer" />
  </div>
</template>

<script>
  import request from '../utils/request'
  import elImageViewer from 'element-ui/packages/image/src/image-viewer.vue'
  export default {
    name: 'UploadImageModal',
    props: {
      visible: Boolean,
      answeUserId: [String, Number],
      userId: [String, Number],
    },
    components: { elImageViewer },
    data() {
      return {
        imageNameList: [],
        showInstructionsModel: false,
        imageUrlList: [undefined, undefined],
        activeIndex: 1,
        activeIcon: require('../assets/image/upload-icon-active.png'),
        inactiveIcon: require('../assets/image/upload-icon-inactive.png'),
        imagePreviewUrl: '',
        isTopUploaded: false,
        isBottomUploaded: false,
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      goLogin() {
        this.$emit('login')
      },
      openImagePreview(i) {
        this.imagePreviewUrl = i
      },
      closeImageViewer() {
        this.imagePreviewUrl = ''
      },
      uploadToChat() {
        if (this.imageNameList[0] == undefined) {
          this.$message({
            message: '请上传舌上照片',
            type: 'error',
          })
          return
        }
        this.$emit('uploadImage', this.imageNameList, this.imageUrlList)
        this.closeModel()
      },
      deleteImage(i) {
        this.imageNameList[i] = undefined
        this.imageUrlList[i] = undefined
        if (i === 0) {
          this.isTopUploaded = false
          this.activeIndex = 1
        }
        if (i === 1) {
          this.isBottomUploaded = false
        }
      },
      uploadSingleImageTop(file) {
        let formData = new FormData()
        formData.append('file', file.raw)
        let params = {
          method: 'POST',
          url: `/applet/dialog/pic/checkpic?userId=${this.userId}&answeUserId=${this.answeUserId}&type=0`,
          data: formData,
        }
        this.req(params).then((res) => {
          if (res.data.data.uploadFileName) {
            this.imageNameList[0] = res.data.data.uploadFileName
            this.imageUrlList[0] = URL.createObjectURL(file.raw)
            this.isTopUploaded = true
            this.activeIndex = 2
            this.$message({ message: '上传照片成功', type: 'success' })
            console.log('upload success :>> ', res, this.imageUrlList[0])
          } else {
            this.$message(res.data.data.code)
          }
        })
      },
      uploadSingleImageBottom(file) {
        let formData = new FormData()
        formData.append('file', file.raw)
        let params = {
          method: 'POST',
          url: `/applet/dialog/pic/checkpic?userId=${this.userId}&answeUserId=${this.answeUserId}&type=1`,
          data: formData,
        }
        this.req(params).then((res) => {
          if (res.data.data.uploadFileName) {
            this.imageNameList[1] = res.data.data.uploadFileName
            this.imageUrlList[1] = URL.createObjectURL(file.raw)
            this.isBottomUploaded = true
            this.$message({ message: '上传照片成功', type: 'success' })
            console.log('upload success :>> ', res, this.imageUrlList[1])
          } else {
            this.$message(res.data.data.code)
          }
        })
      },
      checkCurrentStep(e) {
        console.log('checkCurrentStep:>> ', e)
        if (!this.imageUrlList[0]) {
          e.stopPropagation()
          this.$message('请先上传舌上照片')
        }
      },
      showInstructions() {
        this.showInstructionsModel = true
      },
      closeInstructions() {
        this.showInstructionsModel = false
      },
      closeModel() {
        console.log('close user model :>> ')
        this.$emit('closeModel')
      },
      req(params) {
        return new Promise((resolve, reject) => {
          request(params)
            .then((res) => {
              if (res.data.code == 200) {
                resolve(res)
              } else if (res.data.code == 401) {
                this.goLogin()
              }
            })
            .catch((err) => {
              console.log('catch error upload:>> ', err)
              if (err == 401) {
                this.goLogin()
              }
              // this.goLogin()
            })
        })
      },
    },
  }
</script>
<style scoped lang="less">
  .upload-dialog {
    .upload-dialog-title {
      display: flex;
      align-items: center;
      .upload-instructions {
        margin-left: 12px;
        width: 82px;
        height: 27px;
        background: rgba(101, 176, 180, 0.15);
        border-radius: 4px 4px 4px 4px;
        color: #65b0b4;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .instructions-icon {
          font-size: 18px;
          margin-right: 4px;
          margin-top: 2px;
        }
        .instructions-text {
          font-size: 12px;
        }
      }
    }
  }
  .upload-body-wrapper {
    display: flex;
    justify-content: space-between;
    .upload-image-wrapper {
      display: flex;
      flex-direction: column;
      .upload-image-area-wrapper {
        width: 180px;
        height: 240px;
      }
      .upload-instructions-inner {
        width: 180px;
        font-size: 12px;
        color: #999999;
        line-height: 14px;
        margin-bottom: 12px;
      }
      .image-preview {
        position: absolute;
        //   top: 0px;
        //   left: 0px;
        width: 180px;
        height: 240px;
        border-radius: 8px 8px 8px 8px;
        overflow: hidden;
        .image-preview-mask {
          opacity: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 8px 8px 8px 8px;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 2010;
          position: absolute;
          .operation-container {
            display: flex;
            font-size: 24px;
            color: #ffffff;
            .zoom {
              margin-right: 24px;
            }
            .icon {
              transition: all 0.2s;
              opacity: 0.8;
              cursor: pointer;
            }
            .icon:hover {
              opacity: 1;
            }
          }
        }
        .image-preview-mask:hover {
          opacity: 1;
        }
        .image-preview-image {
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0px;
        }
      }
      .upload-image-area {
        width: 180px;
        height: 240px;
        border-radius: 8px 8px 8px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &.area1 {
          justify-content: space-between;
        }
        .upload-image-skip {
          width: 100%;
          display: flex;
          justify-content: end;
          .skip-button {
            align-self: end;
            margin: 8px;
            width: 64px;
            height: 31px;
            background: #65b0b4;
            border-radius: 4px 4px 4px 4px;
            font-size: 12px;
            color: #ffffff;
            line-height: 2.5;
          }
          .hide {
            opacity: 0;
          }
        }
        .upload-image-icon-wrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .upload-image-icon {
          height: 54px;
          width: 54px;
        }
        .upload-image-icon-text {
          margin-top: 5px;
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
  .image-area-inactivate {
    border: 1px dashed #e0e0e0;
    background: #f8f8f8;
  }
  .image-area-activate {
    border: 1px dashed #65b0b4;
    background: rgba(101, 176, 180, 0.1);
  }
  .upload-dialog-footer {
    margin-top: 24px;
    display: flex;
    justify-content: end;
  }
  .ins-title {
    display: flex;
    align-items: center;
    .ins-title-text {
      margin-left: 8px;
    }
  }
  .ins-model-body {
    .exp-image-wrapper {
      display: flex;
      width: 100%;
      justify-content: space-between;
      .exp-image-wrapper-single {
        display: flex;
        flex-direction: column;
        align-items: center;
        .exp-image {
          width: 180px;
          height: 240px;
          border-radius: 8px;
        }
        .exp-image-text {
          color: #999999;
          font-size: 14px;
          line-height: 16px;
          margin-top: 10px;
        }
      }
    }
  }
  /deep/ .el-dialog {
    width: 448px;
    background: #ffffff;
    border-radius: 16px 16px 16px 16px;
  }
  /deep/ .el-dialog__body {
    padding-left: 24px;
    padding-right: 24px;
  }
</style>
